<template>
    <div class="userInfoPage">
      <el-form class="addForm" ref="form" :model="form" :rules="rules" label-width="1.75rem">
        <div class="userInfoTitle">账号设置</div>
        <el-form-item label="手机号：" prop="phone">
          <div class="flexInput">
            <el-input v-model="form.phone" readonly placeholder="手机号"></el-input>
            <el-button
              size="small"
              class="editBtn editBtnNone"
              @click="()=> { $router.push({path: '/shuzhongtian/dashboard/phoneChange'})}"
              >换绑</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <div class="flexInput">
            <el-input v-model="form.password" readonly type="password" placeholder="密码"></el-input>
            <el-button
              size="small"
              class="editBtn editBtnNone"
              @click="()=> { $router.push({path: '/shuzhongtian/dashboard/passwordChange'})}"
              >密码修改</el-button
            >
          </div>
        </el-form-item>
        <!-- <el-form-item label="头像：" prop="baseName">
            <upload
                ref="upload"
                v-model="form.picture"
                :isShowTip="false"
                :limit="1">
            </upload>
        </el-form-item> -->
      </el-form>
      <!-- <div class="addBottom">
        <el-button
            size="small"
          class="editBtn editBtnNone"
          @click="back()"
          >取消</el-button
        >
        <el-button
          class="editBtn"
          type="primary"
          size="small"
          @click="submit()"
          >保存</el-button
        >
      </div> -->
    </div>
  </template>

<script>
// import upload from '@/views/agriMissionAdd/components/upload.vue'
import { updataUserApi } from '@/api/user'
import { decrypt } from '@/utils/jsencrypt'

export default {
  data () {
    return {
      form: {},
      rules: {}
    }
  },
  components: {
    // upload
  },
  watch: {

  },
  mounted () {
    this.$set(this, 'form', JSON.parse(JSON.stringify(this.$store.getters.userInfo)))
    this.form.phone = this.form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    this.form.password = decrypt(this.form.password)
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async submit () {
      const res = await updataUserApi(this.form)
      this.$message.success(res.msg)
      this.$store.dispatch('user/updataUserInfo', this.form)
      this.$router.go(-1)
    }
  }
}
</script>
  <style lang="scss" scoped>
  .addBottom {
    position: absolute;
    bottom: -0.3rem;
    left: -0.36rem;
    width: calc(100% + 0.25rem + 0.36rem);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7vh;
    box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.05);
  }
  .userInfoPage {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
  }
  ::v-deep .el-input__inner {
    width: 14vw !important;
    height: 3.8vh;
  }
  ::v-deep .el-form-item__label {
  }
  .flexInput {
    display: flex;
    align-items: center;
  }
  .editBtn {
    background: #00C586;
    border-radius: 3px;
  }
  .editBtnNone {
    background: none;
    color: #666666;
    border-color: #00C586;
    color: #00C586;
    margin-right: 0.3vw;
    padding-left: 0;
    padding-right: 0;
    min-width: 4vw;
    height: 3.8vh;
    margin-left: 0.8vw;
  }
  .userInfoTitle {
    font-size: 1.1vw;
    font-weight: 500;
    text-align: center;
    margin: 4vh 0;
  }
  </style>
